<template>
  <div>
    <el-dialog title="填写测评信息" :visible.sync="isOpenEvaluationForm" width="800px" :before-close="closeModal">
      <el-form size="small" :model="form" :rules="rules" ref="formRef"
               label-width="150px">
        <el-form-item label="测评余额：">
          <div class="text-danger">{{ evaluationBalance }}</div>
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-select v-model="form.country" placeholder="请选择国家" size="small" @change="chooseCountry">
            <el-option v-for="(item,index) in dict.type.sys_evaluation_country" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SKU" prop="productSkuId" placeholder="请选择SKU" size="small">
          <el-select v-model="form.productSkuId" @change="chooseProductSkuId">
            <el-option v-for="(item,index) in productSkuList" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间" prop="evaluationTime">
          <el-date-picker v-model="form.evaluationTime" type="datetime" placeholder="选择下单时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关键字" prop="keyWord">
          <el-input size="small" v-model="form.keyWord" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item label="美元价格" prop="skuPrice">
          <el-input size="small" v-model="form.skuPrice" type="number" placeholder="请输入美元价格">
            <template slot="prepend">$</template>
          </el-input>
        </el-form-item>
        <el-form-item label="数量" prop="number">
          <el-input size="small" v-model="form.number" type="number" placeholder="请输入数量"/>
        </el-form-item>
        <el-form-item label="每天最大测评单数" prop="evaluationDayMax">
          <el-input size="small" v-model="form.evaluationDayMax" type="number" placeholder="请输入每天最大测评单数"/>
        </el-form-item>
        <el-form-item label="每月最大测评单数" prop="evaluationMonthMax">
          <el-input size="small" v-model="form.evaluationMonthMax" type="number" placeholder="请输入每月最大测评单数"/>
        </el-form-item>
        <el-form-item label="店铺链接" prop="storeLink">
          <el-input size="small" v-model="form.storeLink" placeholder="请输入店铺链接"/>
        </el-form-item>
        <el-form-item label="采购链接" prop="link">
          <el-input size="small" v-model="form.link" type="text" placeholder="请输入采购链接"/>
        </el-form-item>
        <el-form-item label="优惠码" prop="preferentialCode">
          <el-input size="small" v-model="form.preferentialCode" type="text" placeholder="请输入优惠码"/>
        </el-form-item>
        <el-form-item label="留言" prop="leaveInfo">
          <el-input size="small" v-model="form.leaveInfo" type="text" placeholder="请输入留言"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input size="small" v-model="form.remark" type="text" placeholder="默认订单备注（A）"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
    <!--  客服二维码  -->
    <el-dialog :visible.sync="isOpenQrCode" title="添加客服微信" center width="450px">
      <img src="@/assets/images/kefuImg.jpg" width="400px" height="500px"/>
    </el-dialog>
  </div>
</template>
<script>
import {formatDate} from "@/utils";
import {submitEvaluation, getSkuPrice} from "@/api/product/online/list";
import {queryNowUsdExchange} from "@/api/userIndex";

export default {
  name: 'order-list',
  dicts: ['sys_evaluation_country'],
  props: {
    // 产品规格Id列表
    productSkuList: {
      type: Array,
      default: []
    },
    evaluationBalance: {
      type: Number / String,
      default: ""
    },
    type: {}
  },
  data() {
    return {
      isOpenQrCode: false,//是否打开二维码弹窗
      imgUrl: "../../../assets/images/kefuImg.jpg",
      isOpenEvaluationForm: true,
      form: {
        // handlingFee: 4,//操作费固定4元
      },//测评表单信息
      rules: { // 测评表单校验
        productSkuId: [{required: true, message: '请选择SKU', trigger: 'change'}],
        country: [{required: true, message: '请选择国家', trigger: 'change'}],
        evaluationTime: [{required: true, message: '请选择下单时间', trigger: 'change'}],
        number: [{required: true, message: '请输入数量', trigger: 'blur'}],
        evaluationMonthMax: [{required: true, message: '请输入每月最大测评单数量', trigger: 'blur'}],
        evaluationDayMax: [{required: true, message: '请输入每天最大测评单数量', trigger: 'blur'}],
        link: [{required: true, message: '请输入采购链接', trigger: 'blur'}],
        storeLink: [{required: true, message: '请输入店铺链接', trigger: 'blur'}],
        skuPrice: [{required: true, message: '美元价格不能为空', trigger: 'blur'}],
        preferentialCode: [],
        leaveInfo: [],
        keyWord: [{required: true, message: '请输入关键字', trigger: 'blur'}]
      },
      priceData: "",// 商品价格和采购单价
      exchangeRate: 0,//汇率
    }
  },
  mounted() {
    // if (this.evaluationBalance <= 0) {
    //   this.$alert('余额不足请及时充值！', '提示').then(() => {
    //     this.isOpenQrCode = true
    //   })
    // }
    console.log('type', this.type)
    this.getNowUsdExchange()
  },
  methods: {
    // 打开二维码弹窗
    openQrCodeModal() {
      this.isOpenQrCode = true
    },
    // 获取最新汇率
    getNowUsdExchange() {
      queryNowUsdExchange({code: "usd"}).then(res => {
        this.exchangeRate = Number(res / 100)
      })
    },
    // 选择国家
    chooseCountry(e) {
      console.log('eeee', e)
      this.country = e
      // this.getPrice()
    },
    // 选择SKU
    chooseProductSkuId(e) {
      this.productSkuId = e
      // this.getPrice()
    },
    // 查询价格
    getPrice() {
      if (this.productSkuId && this.country) {
        let data = {
          country: this.country,
          productSkuId: this.productSkuId
        }
        getSkuPrice(data).then(res => {
          let data = res.data
          this.priceData = data
          this.form.unitPrice = data.onLinkPrice
          // this.inputNumber(this.form.number)
        })
      }
    },
    // // 监听输入数量
    // inputNumber(e) {
    //   console.log('输入数量', e)
    //   this.form.number = e
    //   this.form.totalPrices = this.countPrice(this.form.unitPrice * this.form.number)  //采购总价
    // },
    computedPrice(type) {
      let price = 0
      switch (type) {
        case 1: //计算汇率差
          price = this.countPrice((0.1 / this.exchangeRate) * this.form.unitPrice * this.form.number);
          break;
      }
      return price
    },
    // 确定国内运单号
    confirm() {
      let date = new Date(this.form.evaluationTime)
      this.form.evaluationTime = formatDate(date)
      this.form.type = this.type
      console.log('this.form', this.form)
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          submitEvaluation(this.form).then(res => {
            this.$message.success(res.msg)
            this.closeModal('isRef')
          })
        }
      })
    },
    // 关闭发布测评订单弹窗
    closeModal(e) {
      this.isOpenQrCode = false
      this.$emit('evaluationSwitch', e)
    },
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
